// 高阶组件
import React from 'react'
import ReactDOM from 'react-dom'

// 高阶组件:他可以把一些通用的逻辑封装起来，然后统一提供给需要的组件即可
function withInfo(Component) {
  // 输入的参数是组件，返回值还是组件，并且返回的组件渲染的结果依然是输入的参数的组件
  const data = {
    PI: Math.PI,
  }
  return class extends React.Component {
    render() {
      return <Component {...this.props} {...data} />
    }
  }
}

class TestInfo extends React.Component {
  render() {
    return (
      <div>
        测试组件:{this.props.info}
        {this.props.PI}
      </div>
    )
  }
}

class TestMsg extends React.Component {
  render() {
    return <div>圆周率：{this.props.PI}</div>
  }
}

// const NewComponent = withInfo(TestInfo)
const NewComponent = withInfo(TestMsg)

class App extends React.Component {
  render() {
    // return <TestInfo info="hello" />
    return <NewComponent info="hello" />
  }
}

ReactDOM.render(<App />, document.getElementById('root'))
